<template>
    <div class="popup">
        <van-search v-model="inputVal" show-action :placeholder="defaultKeyword.keyword" @search="onSearch"
            @input="onInput">
            <template #action>
                <div @click="onCancel">取消</div>
            </template>
        </van-search>
        <HistoryHot v-if="blockShowNum==1" :hotKeywordList="hotKeywordList" :historyKeywordList="historyKeywordList"
            @listClickFn="listClickFn1" @delhisFn="getPopupData" />
        <Products v-else-if="blockShowNum==2" :keyword="keyword" />
        <List v-else :listArr="listArr" @listClickFn="listClickFn1" />
    </div>
</template>

<script>
    let timer = null; // 定时器名称
    /* 
    历史记录与热门搜索   HistoryHot   1    
    产品区块            Products     2
    列表区块            List         3
*/
    import HistoryHot from '../components/popup/HistoryHot.vue';
    import List from '../components/popup/List.vue';
    import Products from '../components/popup/Products.vue';
    import {
        PopupApi,
        SearchHelperApi
    } from '../request/api'

    export default {
        data() {
            return {
                inputVal: "", // 输入框的值
                blockShowNum: 1, // 显示组件的判断值   1-历史记录   2-产品   3-列表
                hotKeywordList: [], // 历史记录的数组
                historyKeywordList: [], // 热门搜索的按钮
                defaultKeyword: {}, // defaultKeyword.keyword -> placeholder
                listArr: [], // 搜索框匹配的数组
                keyword: "" // 产品区块的关键词
            };
        },
        components: {
            HistoryHot,
            List,
            Products
        },

        methods: {
            // 输入框输入事件
            onInput() {
                // 防抖
                let ifAjax = true; // 默认允许做请求
                // 显示列表区域
                this.blockShowNum = 3;

                // 无论如何,都清除一次定时器
                if (timer) {
                    clearTimeout(timer);
                }

                if (ifAjax) {
                    ifAjax = false; // 立刻禁止再次请求
                    timer = setTimeout(() => {
                        // 调用接口
                        SearchHelperApi({
                            keyword: this.inputVal
                        }).then(res => {
                            console.log(res);
                            if (res.errno == 0) {
                                this.listArr = res.data;
                            }
                            ifAjax = true;  // 当这个请求结束的时候，放开权限，让用户可以做请求
                            clearTimeout(timer);  // 当我请求成功时，清除定时器
                        })
                    },400)
                }
                // 调用接口

            },

            onSearch(val) {
                this.blockShowNum = 2;
                this.keyword = val;
            },

            // 取消按钮触发的函数
            onCancel() {
                // 调回首页
                this.$router.go(-1);
                // 或者this.$router.go(-1)
            },

            // List组件触发的函数
            listClickFn1(num, str) {
                // console.log(arg);
                this.blockShowNum = num;
                this.keyword = str; // 把keyword传到Products组件
                // console.log(this.keyword);
                this.inputVal = str;
            },

            // delhisFn1() {
            //     this.historyKeywordList = []
            // },
            getPopupData() {
                PopupApi().then(res => {
                    // console.log(res);
                    if (res.errno == 0) {
                        let {
                            historyKeywordList,
                            defaultKeyword,
                            hotKeywordList
                        } = res.data;
                        this.historyKeywordList = historyKeywordList;
                        this.defaultKeyword = defaultKeyword;
                        this.hotKeywordList = hotKeywordList;
                    }
                })
            }

            // pushInputValFn(val) {
            //     this.inputVal = val;
            //     this.onInput()
            // }
        },
        created() {
            // 为什么要延迟请求,原因是想让Loading显示在正中间
            setTimeout(() => {
                this.getPopupData();
                if(this.$route.query.blockShowNum==2 && this.$route.query.keyword){
                    console.log(this.$route);
                this.blockShowNum = 2;
                this.keyword = this.$route.query.keyword; // 把keyword传到Products组件
                // console.log(this.keyword);
                this.inputVal = this.$route.query.keyword;
            }
            }, 500)
            
            
        }
    }
</script>

<style lang="less" scoped>
    .popup {
        position: absolute;
        top: 0;
        width: 100%;
        min-height: 100%;
        background-color: #efefef;
    }
</style>